<template>
  <view class="types" :style="{height:show ? '454rpx' : '0'}">
    <view class="flex-row flex-center">
      <!-- #ifndef APP-PLUS -->
      <text class="tbb-sanjiaoxia flex-row flex-center text-40 color-white scroll block" />
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <text class="iconfont flex-row flex-center text-40 color-white scroll block">&#xe644;</text>
      <!-- #endif -->
    </view>
    <scroll-view scroll-y class="type-list" :show-scrollbar="false">
      <view v-for="(item,index) in list" :key="index" class="list-item" hover-class="hover" :hover-stay-time="70" @click="choose(item,index)">
        <view class="flex-row flex-center sub-item" :class="[index === last ? '' : 'border']">
          <text class="text-center text-30" :class="['color-' + (chooseIndex === index ? 'primary' : 't2')]">{{ item.label }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import request from '@/common/api/request'
import { pageVehicleType } from '@/common/api/car'
export default {
  name: 'CarTypes',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chooseIndex: 0,
      list: [
        { label: '全部品牌', value: '' }
      ]
    }
  },
  computed: {
    last() {
      return this.list.length - 1
    }
  },
  created() {
    this.pageVehicleType()
  },
  methods: {
    // 筛选车辆品牌
    async pageVehicleType() {
      this.list = [
        { label: '全部', value: '' }
      ]
      const [err, res] = await pageVehicleType({
        current: 1,
        size: 9999
      })
      if (!request.errorCheck(err, res)) return
      const records = res.data.data.records
      const brandSet = records.map(item => {
        return {
          label: item.brand + item.seatAmount + '座',
          value: item.id,
          autoBrand: item.brand,
          seatAmount: item.seatAmount
        }
      })
      this.list.push(...brandSet)
    },
    // 选择
    choose(item, index) {
      this.chooseIndex = index
      this.$emit('choose', item)
    }
  }
}
</script>

<style scoped lang="scss">
.types{
  @include position(absolute, 236rpx, 48rpx);
  width: 278rpx;
  transition:height .3s linear;
  overflow: hidden;
}
.type-list{
  border-radius: $radius-default;
  background:$font-color-white;
  overflow: hidden;
  height:420rpx;
  transform: translateY(-18rpx);
}
.scroll{
  transform: rotate(180deg);
  margin-left:50rpx;
}
.list-item{
  padding:0 28rpx;
}
.sub-item{
  padding:24rpx 0;
}
.border{
  border-bottom:2rpx solid $color-border;
}
</style>
